import React, { useContext, useState, useEffect } from "react";
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  FlatList,
  Alert,
} from "react-native";
import SampleVillageCard from "../../components/preAdmin/SampleVillageCard";
import SampleVillageContext from "../../context/preparation/SampleVillageContext";
import NoData from "../../components/preAdmin/NoData";
import LoadingBar from "../../components/InterView/LoadingBar";

const SampleVillageSelected = ({ navigation }) => {
  const { villageLists, setStatus, isVillageLoading } =
    useContext(SampleVillageContext);
  const [customList, setCustomList] = useState([]);
  const [choosedList, setChoosedList] = useState([]);

  useEffect(() => {
    let isMounted = true;
    if (isMounted) {
      if (villageLists) {
        let newVillagesNow = villageLists;
        newVillagesNow.map((item) => {
          item.checked = false;
        });
        setCustomList(newVillagesNow);
      }
    }

    return () => {
      isMounted = false;
    };
  }, [villageLists]);

  const onPressItem = (_id) => {
    let customListNow = [...customList];

    for (const item in customListNow) {
      if (customListNow[item]._id === _id) {
        if (customListNow[item].checked === false) {
          customListNow[item].checked = true;
          let itemChoosed = customListNow[item];

          setChoosedList([...choosedList, itemChoosed]);
        } else {
          customListNow[item].checked = false;
          let choosedListNow = choosedList.filter((item) => item._id !== _id);

          setChoosedList(choosedListNow);
        }
      }
    }
    setCustomList(customListNow);
  };

  const onConfirm = () => {
    Alert.alert("提示", "你确定发布吗?\n(原样本村将会被替换)", [
      {
        text: "确定",
        onPress: () => {
          let idGroup = [];
          if (choosedList.length === 0) {
            Alert.alert("提示", "您未选择任何内容", [{ text: "确定" }]);
            return;
          }
          choosedList.map((item) => {
            idGroup.push(item._id);
          });
          setStatus(idGroup);
        },
      },
      {
        text: "取消",
      },
    ]);
  };

  return (
    <View style={styles.container}>
      <LoadingBar visible={isVillageLoading} />
      <FlatList
        style={{ margin: 10 }}
        data={customList}
        keyExtractor={(item, index) => index.toString()}
        ListEmptyComponent={<NoData />}
        renderItem={({ item, index }) => {
          return (
            <SampleVillageCard
              item={item}
              index={index}
              isSelect={true}
              isVisible={true}
              onPressItem={onPressItem}
            />
          );
        }}
      />
      {customList.length !== 0 && (
        <TouchableOpacity style={styles.Button} onPress={() => onConfirm()}>
          <Text style={styles.Text}>发布</Text>
        </TouchableOpacity>
      )}
    </View>
  );
};

var styles = StyleSheet.create({
  container: {
    backgroundColor: "#f5f5f5",
    flex: 1,
  },
  Button: {
    borderRadius: 5,
    margin: 18,
    padding: 10,
    backgroundColor: "#3ABEF0",
    alignItems: "center",
    justifyContent: "center",
    elevation: 2, //设置阴影角度，通过这个设置有无阴影
    shadowColor: "gray", // 设置阴影色
  },
  Text: {
    fontSize: 16,
    color: "#fff",
    fontWeight: "bold",
  },
});

export default SampleVillageSelected;
